import React from 'react';
import {Table, Row, Col, Form, Input, Icon, InputNumber, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import EditMarketInfo from '../../customer/components/EditMarketInfo';
import RightBox from "../../commons/RightBox";
import RIGHT from "../../../utils/RightConstants";
const R = require('ramda');
const FormItem = Form.Item;

export default Form.create({wrappedComponentRef: true})(class MarketInfo extends React.Component {
    constructor(props) {
        super(props);
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource
    }

    handleResetFields = () => {
        this.props.form.resetFields();
    };

    handleOpen = (id, disabled) => {
        this.props.dispatch({
            type: 'customerManage/getMarketById', 
            payload: { id }
        });
        this.editMarketInfo.handleOpen(disabled);
    }

    handleOpenAdd = () => {
        this.editMarketInfo.handleOpen();
    }

    handleDelete = record => {
        this.props.dispatch({
            type: 'customerManage/deleteMarket',
            payload: {
             id: record.id,
             cstid: record.cstid,
            }
        })
    }

    columns = [
        { title: '实际营销时间', dataIndex: 'market_time', key: 'market_time' },
        { title: '营销人员', dataIndex: 'creator', key: 'creator' },
        { title: '营销对象', render(record) {
            if(record.market_object === '1') {
                return '老板';
            }else if(record.market_object == '2') {
                return '财务';
            }else if(record.market_object == '3') {
                return '经理';
            }else if(record.market_object == '4'){
                return '业务员';
            }else {
                return '未知';
            }
        }},
        { title: '营销方式', render(record) {
            if(record.market_mode == '1') {
                return '现场';
            }else if(record.market_mode == '2') {
                return '非现场';
            }else {
                return '未知';
            }
        }},
        { title: '营销阶段', render(record) {
            if(record.market_stage == '1') {
                return '初次交流';
            }else if(record.market_stage == '2') {
                return '普通交流';
            }else if(record.market_stage == '3') {
                return '重要交流';
            }else if(record.market_stage == '4'){
                return '决定性交流';
            }else {
                return '未知';
            }
        }},
        { title: '成果定性', render(record) {
            if(record.result == '1') {
                return '低于预期';
            }else if(record.result == '2') {
                return '符合预期';
            }else if(record.result == '3') {
                return '超过预期';
            }else {
                return '未知';
            }
        }},
        {title: '操作', key: 'key_oprator',
            render: (record) => {
                let viewLink = <a href="#" onClick={this.handleOpen.bind(this, record.id, true)}>查看</a>
                let deleteLink = <Popconfirm onConfirm={this.handleDelete.bind(this, record)} okText="是" cancelText="否" placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除?'}>
                                    <a href="#">删除</a>
                                </Popconfirm>
                    deleteLink = <RightBox resource={RIGHT.CUSTOMER.CUSTOMER_MANAGE_MARKET_DELETE} split={true}>{deleteLink}</RightBox>
                return (
                    <span>{deleteLink}{viewLink}</span>
                );
            }
        }];

    render() {
        const { getFieldDecorator } = this.props.form;
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        let formItemLayout = {
            labelCol: { xs: { span: 24 }, sm: { span: 6 } },
            wrapperCol: { xs: { span: 24 }, sm: { span: 14 } }
        };
        let values = this.props.form.getFieldsValue();
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.marketInfoPage.size,
            total: this.props.marketInfoPage.totalRow,
            showSizeChanger: true,
            current: this.props.marketInfoPage.page,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.marketInfoPage;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'customerManage/getListByCstIdForPage',
                    payload: {
                        id: R.isNil(dataSource.id) ? "" : dataSource.id,
                        page: newPage,
                        cstId: this.props.cstid
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.marketInfoPage;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'customerManage/getListByCstIdForPage',
                    payload: {
                        id: R.isNil(dataSource.id) ? "" : dataSource.id,
                        page: newPage,
                        cstId: this.props.cstid
                    }
                });
            }
        }

        return (
            <div>
                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem>
                                <RightBox resource={RIGHT.CUSTOMER.CUSTOMER_MANAGE_MARKET_ADD}><Button type="primary" icon="plus" size={'default'} disabled={this.props.disabled} onClick={this.handleOpenAdd.bind(this)} style={{display: this.props.disabled ? 'none' : 'inline-block' }}>增加营销线索</Button></RightBox>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <Table dataSource={this.props.marketInfoList} columns={this.columns} bordered={true} size={'middle'} pagination={pagination} scroll={{x:true}}/>
                <EditMarketInfo wrappedComponentRef={(inst) => this.editMarketInfo = inst} dispatch={this.props.dispatch} dataSource={this.props.marketInfo} cstId={this.props.cstid}/>

            </div>
        )
    }
})


// WEBPACK FOOTER //
// ./public/src/components/customer/components/MarketInfo.js